<template>
  <div>
    <div class="text-center text-[28px] mb-4 font-bold">Log in</div>

    <div class="px-6 pb-1.5 text-[15px]">Email address</div>

    <div class="px-6 pb-2">
      <TextInput
        placeholder="Email address"
        :input.sync="email"
        inputType="email"
        :autoFocus="true"
        :error="errors && errors.email ? errors.email[0] : ''"
      />
    </div>

    <div class="px-6 pb-2">
      <TextInput
        placeholder="Password"
        :input.sync="password"
        inputType="password"
      />
    </div>
    <div class="px-6 text-[12px] text-gray-600">Forgot password?</div>

    <div class="px-6 pb-2 mt-6">
      <button
        @click="loginUser()"
        :disabled="(!email || !password)"
        :class="(!email || !password) ? 'bg-gray-200' : 'bg-[#F02C56]'"
        class="w-full text-[17px] font-semibold text-white py-3 rounded-sm"
      >
        Log in
      </button>
    </div>
  </div>
</template>

<script>

export default {
  data() {
    return {
      email: null,
      password: null,
      errors: null
    }
  },
  methods:{
    async loginUser  ()  {
      this.errors = null
      try {
        await this.$store.dispatch('user/getTokens')
        await this.$store.dispatch('user/login',{email:this.email, password:this.password})
        await  this.$store.dispatch('user/getUser')
        await this.$store.dispatch('general/getRandomUsers', 'suggested')
        await this.$store.dispatch('general/getRandomUsers', 'following')
        this.$store.commit('general/change_isLoginOpen',false)
      } catch (error) {
        if (error.response){
          this.errors = error.response.data.errors
        }
      }
    }
  }

}
</script>
